<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>订单支付页</title>
  <link href="/static/order/pay/css/style.css" rel="stylesheet">
  <script charset="utf-8" src="/static/order/pay/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="One_Jdbox">
  <div class="Jdbox_head">
    <span class="bank">收银台</span>
    <ul>
      <li><span>[[${session.loginUser == null?'':session.loginUser.nickname}]]</span><span>退出</span></li>
      <li><a href="http://member.gulimall.com/orderList.html">我的订单</a></li>
    </ul>
  </div>
  <div class="Jdbox_BuySuc">
    <dl>
      <dt></dt>
      <dd>
        <span>订单提交成功，请尽快付款！订单号：[[${submitOrderResp.order.orderSn}]]</span>
        <span>应付金额<font>[[${#numbers.formatDecimal(submitOrderResp.order.payAmount,1,2)}]]</font>元</span>
      </dd>
    </dl>
  </div>
  <div class="Jd_footer">
    <ul>
      <li>
        <img alt="" src="/static/order/pay/img/weixin.png">
        <a th:href="'http://order.gulimall.com/weixinPayOrder?orderSn='+${submitOrderResp.order.orderSn}">微信支付</a>
      </li>
      <li>
        <img alt="" src="/static/order/pay/img/zhifubao.png" style="weight:auto;height:30px;">
        <a th:href="'http://order.gulimall.com/aliPayOrder?orderSn='+${submitOrderResp.order.orderSn}">支付宝</a>
      </li>
    </ul>
  </div>
</div>
</body>
<script type="text/javascript">
  //头部订单成功 订单详细鼠标移入效果
  $(".Jdbox_BuySuc dl dd:last-child span:last-child").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#7EA4FF")
  })
  //分期付款鼠标移入hover效果
  $(".Jd_Fenqi>ol li:not(:first-child)").mouseover(function(){
    $(this).css({"cursor":"pointer","border":"1px solid #E31613"})
  }).mouseout(function(){
    $(this).css("border","1px solid #C9DFFF")
  })
  //支付方式按钮选择hover效果
  $(".Jd_main ul li:nth-child(3) button").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#67A4FF")
  })
  //忘记密码鼠标移入效果
  $(".Jd_main ul li:nth-child(4) span").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#67A4FF")
  })
  //立即支付按钮效果
  $(".Jd_main ul li:nth-child(5) button").mouseover(function(){
    $(this).css({"cursor":"pointer","background":"#FF5350"})
  }).mouseout(function(){
    $(this).css("background","#FC6E6C")
  })

  $(".Jd_footer ul li").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#5E5E5E")
  })

  $(".Jdbox_head>ul li span").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#666666")
  })
  $(".Jdbox_head>ul li:not(:first-child)").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#E31613"})
  }).mouseout(function(){
    $(this).css("color","#666666")
  })


  $(".Jd_Fenqi ul li:first-child").mouseover(function(){
    $(this).css({"cursor":"pointer","color":"#666666"})
  }).mouseout(function(){
    $(this).css({"color":"black"})
  })
</script>
</html>
